/**
 * @author BoLiang
 */
if (typeof accedo === "undefined") {
	accedo = {};
}
if (typeof accedo.achievement === "undefined") {
	accedo.achievement = {};
}

accedo.achievement.achiShow = {

	divCurrID : 0,
	divLength : 0, // total number of div
	divManNode : null,
	divTitNode : null,
	divCtnNode : null,
	divMidNode : null,
	divInnNode : null,
	divScrNode : null,
	divBarNode : null,
	moveCount : 0,
	oldOnkeydownFunc : null,
	appSn : null,
	appSnLength : 0,
	userName : null,
	appsnArray : null,
	appsnCurr : 0,
	divTitAjaxLeftNode : null,
	divTitAjaxUpNode : null,
	app_Name : null,
	blackBGNode : null,

	init : function() {
		this.divCurrID = 0;
		this.divLength = 0;
		this.divManNode = null;
		this.divTitNode = null;
		this.divCtnNode = null;
		this.divMidNode = null;
		this.divInnNode = null;
		this.divScrNode = null;
		this.divBarNode = null;
		this.moveCount = 0;
		this.oldOnkeydownFunc = null;
		this.appSn = null;
		this.appSnLength = 0;
		this.userName = null;
		this.appsnArray = new Array();
		this.appsnCurr = 0;
		this.divTitAjaxLeftNode = null;
		this.divTitAjaxUpNode = null;
		this.app_Name = null;
		this.blackBGNode = null;
	},

	appendAchiPage : function(app_name, username, app_sn) {
		this.init();
		this.appSn = app_sn; 
		this.app_Name = app_name;
		this.divTitNode = this.createTitDiv();
		this.divManNode = this.createManDiv(this.divTitNode);
		
		var bodyNode = document.getElementsByTagName("body")[0];

		this.blackBGNode = document.createElement("div");
		this.blackBGNode.id = "blackBG"; 
		this.blackBGNode.appendChild(this.divManNode);

		bodyNode.appendChild(this.blackBGNode);
		this.initInnerDiv(username, app_sn);
		this.oldOnkeydownFunc = document.onkeydown;
		document.onkeydown = function(e) {
			accedo.achievement.achiShow.keysControl(e);
		};
	},



	removeAchiPage : function() {
		dwr.engine.setPreHook();
		dwr.engine.setPostHook();
		var bodyNode = document.getElementsByTagName("body")[0];
		bodyNode.removeChild(this.blackBGNode);
		document.onkeydown = this.oldOnkeydownFunc;
	},

	preInitHook : function() {
		accedo.achievement.achiShow.preInitHookFunc(); 
	},
	preInitHookFunc : function() {
		var divMidLoading = document.createElement("div");
		divMidLoading.innerHTML = "<img style='margin-left: 330px; margin-top:200px' width='256px' height='51px' src='http://"
								+ accedo.achievement.config.serverIP + ":" 
								+ accedo.achievement.config.serverPort + "/" 
								+ accedo.achievement.config.pluginName + "/scorePlugin/score-images/scoreLoading.gif' />";
		divMidLoading.id = "divMidLoading"; 
		this.divCtnNode.appendChild(divMidLoading); 
	},

	postInitHook : function() {
		accedo.achievement.achiShow.postInitHookFunc(); 
	},
	postInitHookFunc : function() {
		var divMidLoading = document.getElementById("divMidLoading"); 
		this.divCtnNode.removeChild(divMidLoading); 
	},

	initInnerDiv : function(username, appsn) {
		dwr.engine.setPreHook(this.preInitHook);
		dwr.engine.setPostHook(this.postInitHook);
		AchiService._path = "http://"
								+ accedo.achievement.config.serverIP + ":" 
								+ accedo.achievement.config.serverPort + "/" 
								+ accedo.achievement.config.pluginName + "/dwr";
		AchiService.getJsonAchisByAppsn(username, appsn,
				this.initInnerDivCallback);

	},

	initInnerDivCallback : function(jsonData) {

		accedo.achievement.achiShow.divMidNode = accedo.achievement.achiShow
				.createMidDiv(jsonData);
		accedo.achievement.achiShow.divCtnNode
				.appendChild(accedo.achievement.achiShow.divMidNode);
		accedo.achievement.achiShow.divCurrID = 0;
		var divNode = document
				.getElementById(accedo.achievement.achiShow.divCurrID);
		divNode.style.borderColor = "white";
		divNode.style.backgroundColor = "#FF6600";
	},

	createManDiv : function(tilNode) {
		this.divManNode = document.createElement("div");
		this.divManNode.id = "divAchiShowMain";
		this.divCtnNode = document.createElement("div");
		this.divCtnNode.id = "divAchiShowContainer";
		this.divManNode.appendChild(tilNode);
		this.divManNode.appendChild(this.divCtnNode);

		return this.divManNode;
	},
	createTitDiv : function() {
		this.divTitNode = document.createElement("div");
		this.divTitNode.id = "divAchiShowTitle";

		this.divTitAjaxLeftNode = document.createElement("div");
		this.divTitAjaxLeftNode.id = "divAchishowTitleAjaxLeft";
		this.divTitAjaxLeftNode.innerHTML = "<img width=100% height=100% src='http://"
										  + accedo.achievement.config.serverIP + ":" 
										  + accedo.achievement.config.serverPort + "/" 
										  + accedo.achievement.config.pluginName + "/images/appImages/"
										  + this.appSn + ".png' />"

		var divTitRightNode = document.createElement("div");
		divTitRightNode.id = "divAchishowTitleRight";

		this.divTitAjaxUpNode = document.createElement("div");
		this.divTitAjaxUpNode.id = "divAchishowTitleAjaxUp";
		this.divTitAjaxUpNode.innerHTML = "<font color=white>&nbsp&nbsp&nbsp"
										+ this.app_Name 
										+ "</font>";
		var divTitDownNode = document.createElement("div");
		divTitDownNode.id = "divAchishowTitleDown";
		divTitDownNode.innerHTML = "<font color=white>&nbsp&nbsp&nbspAchievements</font>";

		divTitRightNode.appendChild(this.divTitAjaxUpNode); 
		divTitRightNode.appendChild(divTitDownNode); 
		this.divTitNode.appendChild(this.divTitAjaxLeftNode); 
		this.divTitNode.appendChild(divTitRightNode); 
		

		var divTitCtnNode = document.createElement("div");
		divTitCtnNode.id = "divAchishowTitleCtn";
		divTitCtnNode.appendChild(this.divTitNode);
		return divTitCtnNode;
	},
	createMidDiv : function(jsonData) {
		this.divLength = jsonData.achis.length;
		this.divInnNode = document.createElement("div");
		this.divInnNode.id = "divAchiShowInner";
		this.divInnNode.className = "divAchiShowInner";
		this.divInnNode.style.height = (105 * this.divLength) + "px";
		var topInterval = 0;

		// create all of the DIV and append them into div container
		for ( var divNum = 0; divNum < this.divLength; divNum++) {
			topInterval = topInterval + 5;
			var divNode = document.createElement("div");
			divNode.id = divNum;
			divNode.className = "divAchiShowCell";
			divNode.style.top = topInterval + "px";

			var divStarNode = document.createElement("div");
			divStarNode.id = "divStar";
			divStarNode.innerHTML = "<img width=90% height=90% src='http://"
								  + accedo.achievement.config.serverIP + ":" 
								  + accedo.achievement.config.serverPort + "/" 
								  + accedo.achievement.config.pluginName 
								  + "/achiPlugin/achi-images/achiStar.png' /><input type='hidden' id=hidden"
								+ divNum
								+ " value='"
								+ jsonData.achis[divNum].achi_sn
								+ "' />";
			divNode.appendChild(divStarNode);

			var divContNode = document.createElement("div");
			divContNode.id = "divCont";
			

			var divAchiNameNode = document.createElement("div");
			divAchiNameNode.id = "divAchiName"; 
			divAchiNameNode.innerHTML = "<font color='white'>"
					+ jsonData.achis[divNum].achi_name + "</font>";
			var divAchiScoreNode = document.createElement("div");
			divAchiScoreNode.id = "divAchiScore"; 
			divAchiScoreNode.innerHTML = "<font color='white'>Points: "
					+ jsonData.achis[divNum].achi_score + "</font>";


			divContNode.appendChild(divAchiNameNode);
			divContNode.appendChild(divAchiScoreNode);
			divNode.appendChild(divContNode);


			var divTickNode = document.createElement("div");
			divTickNode.id = "divTick";
			divTickNode.innerHTML = "<img width=90% height=90% src='http://"
								  + accedo.achievement.config.serverIP + ":" 
								  + accedo.achievement.config.serverPort + "/" 
								  + accedo.achievement.config.pluginName + "/achiPlugin/achi-images/achiTick.png' />";

			if (jsonData.achis[divNum].achi_state == "A") {
				divNode.appendChild(divTickNode);
			}

			this.divInnNode.appendChild(divNode);

		}
		// *********************************************
		this.divScrNode = document.createElement("div");
		this.divScrNode.id = "divAchiShowScroll";
		this.divBarNode = document.createElement("div");
		this.divBarNode.id = "divAchiShowScrollBar";
		this.divBarNode.innerHTML = "<img width=100% height=100% src='http://"
								  + accedo.achievement.config.serverIP + ":" 
								  + accedo.achievement.config.serverPort + "/" 
								  + accedo.achievement.config.pluginName + "/achiPlugin/achi-images/achiBarFront.png' />";
		if (this.divLength <= 4) {
			this.divBarNode.style.height = "420px";
		} else {
			this.divBarNode.style.height = ((420 / this.divLength) * 4) + "px";
		}
		
		this.divScrNode.appendChild(this.divBarNode);

		// *********************************************

		this.divMidNode = document.createElement("div");
		this.divMidNode.className = "divAchiShowMiddle";
		this.divMidNode.appendChild(this.divInnNode);
		this.divMidNode.appendChild(this.divScrNode);

		return this.divMidNode;
	},

	moveCurrDiv : function(direction) {
		var divOldNode = document.getElementById(this.divCurrID);
		if (direction == "down" && this.divCurrID < this.divLength - 1) {
			this.divCurrID = this.divCurrID + 1;
			var divNewNode = document.getElementById(this.divCurrID);
			divOldNode.style.borderColor = "#333333";
			divOldNode.style.backgroundColor = null;

			divNewNode.style.borderColor = "white";
			divNewNode.style.backgroundColor = "#FF6600";

			if (this.moveCount == 3) {
				var topValue = this.divInnNode.offsetTop - 105;
				this.divInnNode.style.top = topValue + "px";

				if (this.divCurrID == this.divLength - 1) {
					var topBarValue = 420 - ((420 / this.divLength) * 4);
					this.divBarNode.style.top = topBarValue + "px";
				} else {
					var topBarValue = this.divBarNode.offsetTop
							+ (420 / this.divLength);
					this.divBarNode.style.top = topBarValue + "px";
				}

			} else {
				this.moveCount++;
			}

		} else if (direction == "up" && this.divCurrID > 0) {
			this.divCurrID = this.divCurrID - 1;
			var divNewNode = document.getElementById(this.divCurrID);
			divOldNode.style.borderColor = "#333333";
			divOldNode.style.backgroundColor = null;
			divNewNode.style.borderColor = "white";
			divNewNode.style.backgroundColor = "#FF6600";

			if (this.moveCount == 0) {
				var topValue = this.divInnNode.offsetTop + 105;
				this.divInnNode.style.top = topValue + "px";

				if (this.divCurrID == 0) {
					this.divBarNode.style.top = "0px";
				} else {
					var topBarValue = this.divBarNode.offsetTop
							- (420 / this.divLength);
					this.divBarNode.style.top = topBarValue + "px";
				}
			} else {
				this.moveCount--;
			}

		} else if (direction == "left") {

			if (this.appsnCurr > 0) {
				this.divCtnNode.removeChild(this.divMidNode);
				this.appsnCurr--;
				this.moveCount = 0;
				this.initInnerDiv(this.userName,
						this.appsnArray[this.appsnCurr]);
			}

		} else if (direction == "right") {
			 accedo.achievement.achiRightShow.appendRight();


		}
	},
	keysControl : function(e) {
		e = window.event || e;
		switch (e.keyCode) {
		// left button
		case 37:
			this.moveCurrDiv("left");
			break;
		// up button
		case 38:
			this.moveCurrDiv("up");
			break;
		// right button
		case 39:
			this.moveCurrDiv("right");
			break;
		// down button
		case 40:
			this.moveCurrDiv("down");
			break;

		// enter button
		case 13:
			document.getElementById("divAchiShowMain").style.opacity="0.4";
			var hiddenInputNode = document.getElementById("hidden"
					+ this.divCurrID);
			var achiSnValue = hiddenInputNode.getAttribute("value");
			accedo.achievement.achiContShow.openPage(achiSnValue);
			break;
		// esc button
		case 27:
		
			this.removeAchiPage();
			break;
		default:
			break;
		}
	}

};
